<script setup>
import { onMounted } from "vue";
let map = null;
let marker = null;
const handleMarkerClick = () => {
  const infoWindow = new AMap.InfoWindow({
    //创建信息窗体
    isCustom: true, //使用自定义窗体
    content:
      "<div style='background-color: white; padding: 0;color:red;'>HELLO,AMAP!</div>", //信息窗体的内容可以是任意html片段
    offset: new AMap.Pixel(16, -45),
  });
  const onMarkerClick = function (e) {
    infoWindow.open(map, e.target.getPosition()); //打开信息窗体
    //e.target就是被点击的Marker
  };

  marker.on("click", onMarkerClick); //绑定click事件
};

const getLocation = () => {
  AMap.plugin("AMap.Geolocation", function () {
    // 创建一个Geolocation实例
    var geolocation = new AMap.Geolocation({
      enableHighAccuracy: true, // 是否使用高精度定位，默认：true  // 耗电量
      timeout: 10000, // 设置定位超时时间，默认：无穷大
      offset: [10, 20], // 定位按钮的停靠位置的偏移量
      zoomToAccuracy: true, //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
      position: "RB", //  定位按钮的排放位置,  RB表示右下
    });

    geolocation.getCurrentPosition(function (status, result) {
      if (status == "complete") {
        onComplete(result);
      } else {
        onError(result);
      }
    });

    function onComplete(data) {
      // data是具体的定位信息
      console.log("data=>", data);
    }

    function onError(data) {
      // 定位出错
      console.log("error=>", data);
    }
  });
};

const getCityLocation = () => {
  AMap.plugin("AMap.CitySearch", function () {
    var citySearch = new AMap.CitySearch();
    citySearch.getLocalCity(function (status, result) {
      if (status === "complete" && result.info === "OK") {
        // 查询成功，result即为当前所在城市信息
        console.log("result=>", result);
      }
    });
  });
};

onMounted(() => {
  map = new AMap.Map("container", {
    zoom: 16,
  });

  //   getLocation();
  getCityLocation();
});
</script>

<template>
  <div>
    <div id="container"></div>
  </div>
</template>

<style lang="scss" scoped>
#container {
  width: 100vw;
  height: calc(100vh - 100px);
}
</style>
